<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8" />
	<link rel="apple-touch-icon" sizes="76x76" href="./assets/img/favicon.ico">
	<link rel="icon" type="image/png" href="./assets/img/favicon.ico">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title>数据要素流通平台</title>
	<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no'
		name='viewport' />

	<!-- Google Font -->


	<!-- Main CSS -->
	<link href="./assets/css/main.css" rel="stylesheet" />

	<!-- Animation CSS -->
	<link href="vendor/aos.css" rel="stylesheet" />
	<style>
		span {
			position: absolute;
			color: red;
			font-size: 10px;
			margin-left: 0.5rem;
		}
	</style>

</head>
<style>
	.err {
		font-size: 12px;
		color: rgb(246, 102, 102);
		display: block;
	}

	.success {
		display: none;
	}
</style>

<body>




	<!-- Main -->
	<div class="d-md-flex h-md-100 align-items-center">
		<div class="col-md-6 p-0 bg-indigo h-md-100"
			style="background-image: url(./assets/img/demo/banner1.jpg);background-size: cover;">
			<div class="text-white d-md-flex align-items-center h-100 p-5 text-center justify-content-center">
				<div class="logoarea pt-5 pb-5">
					<p>
						<!-- <i class="fa fa-anchor fa-3x"></i> -->
					</p>
					<h1 class="mb-0 mt-3 display-4">数据要素流通平台</h1>

				</div>
			</div>
		</div>
		<div class="col-md-6 p-0 bg-white h-md-100 loginarea">
			<div class="d-md-flex align-items-center h-md-100 p-5 justify-content-center">
				<form class="border rounded p-5" id="form1">
					<h3 class="mb-4 text-center">修改密码</h3>
					<div class="form-group">
						<input type="password" class="form-control" id="InputOldPassword" placeholder="旧密码" required="">
						<span></span>
					</div>
					<div class="form-group">
						<input type="password" class="form-control" id="InputNewPassword" placeholder="新密码(6-12位)"
							required="">
						<span></span>
					</div>
					<div class="form-group">
						<input type="password" class="form-control" id="InputPassword" placeholder="确认密码" required="">
						<span></span>
					</div>
					<!-- <div class="form-group form-check">
					<input type="checkbox" class="form-check-input" id="exampleCheck1">
					<label class="form-check-label small text-muted" for="exampleCheck1">记住我</label>
				</div> -->
					<button type="submit" class="btn btn-success btn-round btn-block shadow-sm" id="succbtn">提交</button>
					<small class="d-block mt-4 text-center"><a class="text-gray"
							href="./forgetPassword.html">忘记密码?</a></small>
				</form>
			</div>
		</div>
	</div>
	<!-- End Main -->


	<!--------------------------------------
JAVASCRIPTS
--------------------------------------->
	<script src="vendor/jquery.min.js" type="text/javascript"></script>
	<script src="js/tool.js" type="text/javascript"></script>
	<script src="./assets/layui/layui.js" type="text/javascript"></script>

	<script>
		$(function () {
			let password
			let password1
			let password2
			$("#InputOldPassword").blur(function () {
				// $('span').empty()
				password = $("#InputOldPassword").val();

				if (!password) {
					$(this).parent().find('span').html("*密码不能为空")
				} else if (password.length < 6) {
					$(this).parent().find('span').html("*请输入6-12位密码")
				} else {
					$('span').empty()
				}
			})
			$("#InputNewPassword").blur(function () {
				// $('span').empty()
				password1 = $("#InputNewPassword").val();

				if (!password1) {
					$(this).parent().find('span').html("*密码不能为空")
				} else if (password.length < 6) {
					$(this).parent().find('span').html("*请输入6-12位密码")
				} else {
					$('span').empty()
				}
			})
			$("#InputPassword").blur(function () {
				// $('span').empty()
				password2 = $("#InputPassword").val();

				if (!password2) {
					$(this).parent().find('span').html("*密码不能为空")
				} else if (password1 != password2) {
					$(this).parent().find('span').html("两次密码不一致")
				}  else {
					$('span').empty()
				}
			})
			//提交
			$('#form1').on('submit', function (e) {
				e.preventDefault();
				console.log(window.Http)
				if (password1 == password2) {
					$.ajax({
       					timeout:30000,
						url: window.Http + `/system/user/profile/updatePwd?oldPassword=${password}&newPassword=${password1}`,
						type: 'PUT',
						headers: {
							'Authorization': "Bearer " + sessionStorage.getItem('Token')
						},
						// data:JSON.stringify({"oldPassword":password,"newPassword":password1}),
						// contentType: 'application/json;charset=utf-8',
						success: function (res) {
							if (res.code == 200) {
								// 成功跳转到登录页
								sessionStorage.setItem('Token',"");
		  						sessionStorage.setItem('UserId',"");
								window.location.href = './login.html'
							} else {
								layer.msg(res.msg);
							}
						},
						error: function (err) {
							layer.msg("服务器异常");
						}
					})
				}
			})
		})
	</script>
</body>

</html>
